import './WorkPlan.scss'
import { v4 } from 'uuid'
import dayjs from 'dayjs'
import { useState } from 'react'
import { useRequest } from 'alova'
import Marquee from 'react-fast-marquee'
import { useEventEmitter, useMount } from 'ahooks'
import { Calendar, DatePicker, Spin, Alert, App } from "antd"

import { Http } from '../../Api'
import { ModelBox } from '../../Model'
import { findDataByKey, replaceDataByKey, deleteDateByKey } from '../../Utils/configFun'

const WorkPlan = () => {
    const { message } = App.useApp()
    const [Loading, setLoading] = useState(true)
    const [DayDate, setDayDate] = useState()
    const [MonthDate, setMonthDate] = useState()
    const [MonthData, setMonthData] = useState({})
    const [OptionsCall, setOptionsCall] = useState()
    const { send } = useRequest(() => Http({ url: 'getDate' }), { immediate: false })
    useMount(() => {
        // 默认获取本月的计划信息 // 写入缓存
        const day = dayjs().format('YYYY-MM')
        setMonthDate(day)
        // 模拟请求
        send().then(res => {
            setMonthData(res)
            setLoading(false)
        })
    })

    const cellRender = (e) => {
        const listData = MonthData[dayjs(e).format('YYYY-MM-DD')] || []
        return (
            <div className="DateItem">
                {listData.map(({ uuid, type, title, start }) => (
                    <Alert
                        key={uuid}
                        type={type}
                        showIcon={false}
                        banner
                        message={
                            <Marquee play={title.length > 6} pauseOnHover>
                                <div className='MarqueeText'>
                                    <span>{dayjs(start, 'HH:mm:ss').format('HH:mm')}</span> {title}
                                </div>
                            </Marquee>
                        }
                        onClick={(e) => onClickAlert(e, uuid)}
                    />
                ))}
            </div>
        )
    }

    const onDatePicker = (e, onChange) => {
        onChange(e)
        setMonthDate(dayjs(e).format('YYYY-MM'))
        setLoading(true)
        // 判断indexedDB
        // 模拟请求
        setTimeout(() => setLoading(false), 500)
    }

    const onClickAlert = (e, uuid) => {
        e.stopPropagation()
        setOptionsCall({ type: 'ModifyWorkPlan', title: '工作计划详情', width: 600, data: findDataByKey(MonthData, uuid) })
    }

    const onSelect = (e) => {
        setDayDate(dayjs(e).format('YYYY-MM-DD'))
        setOptionsCall({ type: 'ModifyWorkPlan', title: '新增工作计划', width: 600, data: dayjs(e).format('YYYY-MM-DD') })
    }

    const ModalEvent = useEventEmitter()
    ModalEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'Added') {
            if (!MonthData[DayDate]) MonthData[DayDate] = [{ ...data, uuid: v4() }]
            else MonthData[DayDate] = [...MonthData[DayDate], { ...data, uuid: v4() }]
            // 执行添加逻辑
            console.log('添加数据', MonthData)
            setMonthData({ ...MonthData })
            setDayDate()
            ModalEvent.emit({ type: 'Off' })
            message.success('添加成功!')
        }
        if (type === 'Modify') {
            const updatedEvents = replaceDataByKey(MonthData, data, data.uuid)
            // 执行修改逻辑
            console.log('修改数据', updatedEvents)
            setMonthData({ ...updatedEvents })
            ModalEvent.emit({ type: 'Off' })
            message.success('修改成功!')
        }
        if (type === 'Delete') {
            const deleteEvents = deleteDateByKey(MonthData, data)
            // 执行删除逻辑
            console.log('删除数据', deleteEvents)
            setMonthData({ ...deleteEvents })
            ModalEvent.emit({ type: 'Off' })
            message.success('删除成功!')
        }
    })




    return (
        <div className='WorkPlan'>
            <Spin spinning={Loading}>
                <Calendar
                    onSelect={onSelect}
                    cellRender={cellRender}
                    headerRender={({ value, onChange }) => {
                        return (
                            <div className='headerRender'>
                                <div>{dayjs(MonthDate).format('YYYY年M月')} 工作计划和提醒信息</div>
                                <DatePicker allowClear={false} value={value} picker="month" onChange={e => onDatePicker(e, onChange)} />
                            </div>
                        )
                    }}
                />
            </Spin>
            <ModelBox OptionsCall={OptionsCall} ModalEvent={ModalEvent} />
        </div>
    );
};

export default WorkPlan;